import React, { useEffect, useState } from "react";
import { PageHeader, Card, Col, Row, List } from "antd";
import axios from "axios";
import _ from "lodash";

export default function News() {
  const [dataSource, setDataSource] = useState([]);
  useEffect(() => {
    axios.get(`/news?_expand=category`).then(({ data }) => {
      setDataSource(Object.entries(_.groupBy(data, v => v.category.title)));
    });
  }, []);
  return (
    <div>
      <PageHeader
        className="site-page-header"
        title="全球最新新闻"
        subTitle="查看新闻"
      />
      <Row gutter={[16, 16]} style={{ width: "100%" }}>
        {dataSource.map((v, index) => {
          return (
            <Col span={8} key={index}>
              <Card title={v[0]} bordered={true} hoverable>
                <List
                  size="large"
                  dataSource={v[1]}
                  pagination={{ pageSize: 3 }}
                  renderItem={item => (
                    <List.Item>
                      <a href={`#/detail/${item.id}`}>{item.title}</a>
                    </List.Item>
                  )}
                />
              </Card>
            </Col>
          );
        })}
      </Row>
    </div>
  );
}
